﻿<!DOCTYPE HTML>
<html>
<head>
    <title>Profile</title>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/skel.min.js"></script>
    <script src="js/skel-panels.min.js"></script>
    <script src="js/init.js"></script>
    <script src="js/notification.js"></script>

    <link href="css/zozo.tabs.css" rel="stylesheet"/>

    <script src="js/zozo.tabs.js"></script>
    <script type="text/javascript" src="js/ui.core.js"></script>
    <script type="text/javascript" src="js/jquery.scroll-follow.js"></script>
    <script type="text/javascript" src="js/todo.js"></script>
    <link rel="stylesheet" type="text/css" href="css/animate-custom.css"/>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#tdl-spmenu-s2').scrollFollow({
                speed: 1,
                offset: 70
            });
        });
    </script>
    <!--[if lt IE 9]>
    <style>
        .content {
            height: auto;
            margin: 0;
        }

        .content div {
            position: relative;
        }
    </style>
    <![endif]-->
    <noscript>
        <link rel="stylesheet" href="css/skel-noscript.css"/>
        <link rel="stylesheet" href="css/style.css"/>
        <link rel="stylesheet" href="css/style-wide.css"/>
    </noscript>
    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,700|Open+Sans+Condensed:300,700"
          rel="stylesheet"/>
</head>
<body class="edit-body">

<div id="top-tool" class="skel-panels-fixed">
</div>
<!-- Header -->
<div id="header" class="skel-panels-fixed">

    <div class="top">
        <!-- noti -->
        <div class="noti">
            <a class="event-request-icon">
                <div class="count">22</div>
            </a>

            <div class="event-request-item">
                <ul class="root">
                    <li><a href="#">
                        <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                              alt=""/></span>

                <span class="noti-body">
                    <b class="user-name">thnonl</b>
                    Demo notification<br/>
                <i class="noti-date">10 min ago</i></span>
                    </a></li>
                    <li><a href="#">
                        <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                              alt=""/></span>

                <span class="noti-body">
                    <b class="user-name">thnonl</b>
                    Demo notification Demo notification Demo notification Demo notification Demo<br/>
                <i class="noti-date">10 min ago</i></span>
                    </a></li>
                    <li><a href="#">
                        <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                              alt=""/></span>

                <span class="noti-body">
                    <b class="user-name">thnonl</b>
                    Demo notification<br/>
                <i class="noti-date">10 min ago</i></span>
                    </a></li>

                </ul>
            </div>


            <a class="friend-request-icon">
                <div class="count">1</div>
            </a>

            <div class="friend-request-item">
                <ul class="root">
                    <li><a href="#"> <span class="image avatar-micro"><img src="images/avatar.jpg" alt=""/></span> <span
                            class="noti-body">                     <b class="user-name">thnonl</b>                     Demo notification Demo notification Demo notification Demo notification Demo<br/>                 <i
                            class="noti-date">10 min ago</i></span> </a></li>
                    <li><a href="#"> <span class="image avatar-micro"><img src="images/avatar.jpg" alt=""/></span> <span
                            class="noti-body">                     <b class="user-name">thnonl</b>                     Demo notification Demo notification Demo notification Demo notification Demo<br/>                 <i
                            class="noti-date">10 min ago</i></span> </a></li>
                    <li><a href="#"> <span class="image avatar-micro"><img src="images/avatar.jpg" alt=""/></span> <span
                            class="noti-body">                     <b class="user-name">thnonl</b>                     Demo notification Demo notification Demo notification Demo notification Demo<br/>                 <i
                            class="noti-date">10 min ago</i></span> </a></li>
                </ul>
            </div>
            <a class="message-icon">
                <div class="count">10</div>
            </a>

            <div class="message-item">
                <ul class="root">
                    <li><a href="#"> <span class="image avatar-micro"><img src="images/avatar.jpg" alt=""/></span> <span
                            class="noti-body">                     <b class="user-name">thnonl</b>                     Demo notification Demo notification Demo notification Demo notification Demo<br/>                 <i
                            class="noti-date">10 min ago</i></span> </a></li>
                    <li><a href="#"> <span class="image avatar-micro"><img src="images/avatar.jpg" alt=""/></span> <span
                            class="noti-body">                     <b class="user-name">thnonl</b>                     Demo notification Demo notification Demo notification Demo notification Demo<br/>                 <i
                            class="noti-date">10 min ago</i></span> </a></li>
                    <li><a href="#"> <span class="image avatar-micro"><img src="images/avatar.jpg" alt=""/></span> <span
                            class="noti-body">                     <b class="user-name">thnonl</b>                     Demo notification Demo notification Demo notification Demo notification Demo<br/>                 <i
                            class="noti-date">10 min ago</i></span> </a></li>
                </ul>
            </div>
            <a class="noti-icon">
                <div class="count">99</div>
            </a>

            <div class="notification-item">
                <ul class="root">
                    <li><a href="#"> <span class="image avatar-micro"><img src="images/avatar.jpg" alt=""/></span> <span
                            class="noti-body">                     <b class="user-name">thnonl</b>                     Demo notification Demo notification Demo notification Demo notification Demo<br/>                 <i
                            class="noti-date">10 min ago</i></span> </a></li>
                    <li><a href="#"> <span class="image avatar-micro"><img src="images/avatar.jpg" alt=""/></span> <span
                            class="noti-body">                     <b class="user-name">thnonl</b>                     Demo notification Demo notification Demo notification Demo notification Demo<br/>                 <i
                            class="noti-date">10 min ago</i></span> </a></li>
                    <li><a href="#"> <span class="image avatar-micro"><img src="images/avatar.jpg" alt=""/></span> <span
                            class="noti-body">                     <b class="user-name">thnonl</b>                     Demo notification Demo notification Demo notification Demo notification Demo<br/>                 <i
                            class="noti-date">10 min ago</i></span> </a></li>
                </ul>
            </div>
        </div>
        <!-- avatar-header -->
        <div id="avatar-header">
            <span class="image avatar-large"><img src="images/avatar.jpg" alt=""/></span>

            <h1 id="user-name">thnonl</h1>
            <span class="byline">Thái Hoàng Nam</span>
        </div>

        <!-- Nav -->
        <nav id="nav">
            <ul>
                <li><a href="#top" id="top-link" class="skel-panels-ignoreHref"><span class="fa fa-home">Home</span></a>
                </li>
                <li><a href="#" class="skel-panels-ignoreHref"><span class="fa fa-envelope">Message</span></a></li>
                <li><a href="#" class="skel-panels-ignoreHref"><span class="fa fa-user">My Timeshelf</span></a></li>
                <li><a href="#" class="skel-panels-ignoreHref"><span class="fa fa-th">Event Calendar</span></a></li>
            </ul>
        </nav>

        <!-- Recent Event -->
        <div id="recent-event"><p style="text-align: left; font-size: 0.8em; margin-left: 40px;">Recent Events</p>

            <div class="item">
                <a href="#"><span>Halloween</span></a>
                <a href="#"><span>Va lung tung</span></a>
                <a href="#"><span>Giữa thu</span></a>
                <a href="#"><span>Giáng xinh</span></a>
                <a href="#"><span>Xin nhựt</span></a>
            </div>
        </div>
    </div>
</div>

<!-- Main -->
<div id="main">

<!-- Home -->
<section id="top" class="one">
<div class="tdl-spmenu tdl-spmenu-vertical tdl-spmenu-right" id="tdl-spmenu-s2">
    <div id="btn"></div>
    <div class="to-do-list"><h1>Every day</h1>
        <ul class="to-do-item">

            <li><input type="checkbox" id="everyday-1" checked/>
                <label for="everyday-1">Ăn sáng</label></li>

            <li><input type="checkbox" id="everyday-2"/><label for="everyday-2">Đánh nhau</label></li>
            <li><input type="checkbox" id="everyday-3" checked/><label for="everyday-3">Chơi gêm</label></li>
            <li><input type="checkbox" id="everyday-4" checked/><label for="everyday-4">Ăn tối</label></li>
            <li><input type="checkbox" id="everyday-5"/><label for="everyday-5">Chat đêm</label></li>
        </ul>
    </div>
</div>

<div id="page">
<div id="example" class="k-content">
<div id="nav-wapper">
<div id="tabbed-nav" style="width: 95% !important;">
<ul>
    <li><a>Information</a></li>
    <li><a>Friend</a></li>
    <li><a>Group</a></li>
    <li><a>Recent Event</a></li>
</ul>

<div>
<div>
    <table class="info">
        <tr>
            <td>
                <div class="avatar-post">
                                                <span class="image avatar-small"><img src="images/avatar.jpg"
                                                                                      alt=""/></span>

                    <h1>thnonl</h1>
                    <span class="byline">Thái Hoàng Nam <br/> <i>Joined: 1/1/2014</i></span>
                </div>

                <div>
                    <h1>Work</h1>

                    <p><b>Occupation:</b> Developer</p>

                    <p><b>Workplace:</b> Fsoft</p>

                    <p><b>Study place:</b> FPT University</p>
                </div>


            <td>
                <div>
                    <h1>About</h1>

                    <p>I'm a super handsome man!</p>
                </div>
                <div>
                    <h1>Basic Information</h1>

                    <p><b>Email:</b> thnonl@my9time.com</p>

                    <p><b>Birthday:</b> 01/01/1992</p>

                    <p><b>Gender:</b> Male</p>

                    <p><b>Location:</b> Đà Nẵng, Việt Nam</p>

                    <p><b>Language:</b> Vietnamese, English, Japanese, Chinese</p>
                </div>
            </td>
        </tr>
    </table>
</div>

<div>
    <table class="friend">
        <tr>
            <td>
                <div class="avatar-post">
                                                <span class="image avatar-small"><img src="images/avatar.jpg"
                                                                                      alt=""/></span>

                    <h1>thnonl</h1>
                    <span class="byline">Thái Hoàng Nam <br/> <i>Joined: 1/1/2014</i></span>
                </div>
                <div class="avatar-post">
                                                <span class="image avatar-small"><img src="images/avatar.jpg"
                                                                                      alt=""/></span>

                    <h1>thnonl</h1>
                    <span class="byline">Thái Hoàng Nam <br/> <i>Joined: 1/1/2014</i></span>
                </div>
                <div class="avatar-post">
                                                <span class="image avatar-small"><img src="images/avatar.jpg"
                                                                                      alt=""/></span>

                    <h1>thnonl</h1>
                    <span class="byline">Thái Hoàng Nam <br/> <i>Joined: 1/1/2014</i></span>
                </div>
                <div class="avatar-post">
                                                <span class="image avatar-small"><img src="images/avatar.jpg"
                                                                                      alt=""/></span>

                    <h1>thnonl</h1>
                    <span class="byline">Thái Hoàng Nam <br/> <i>Joined: 1/1/2014</i></span>
                </div>
                <div class="avatar-post">
                                                <span class="image avatar-small"><img src="images/avatar.jpg"
                                                                                      alt=""/></span>

                    <h1>thnonl</h1>
                    <span class="byline">Thái Hoàng Nam <br/> <i>Joined: 1/1/2014</i></span>
                </div>
                <div class="avatar-post">
                                                <span class="image avatar-small"><img src="images/avatar.jpg"
                                                                                      alt=""/></span>

                    <h1>thnonl</h1>
                    <span class="byline">Thái Hoàng Nam <br/> <i>Joined: 1/1/2014</i></span>
                </div>
                <div class="avatar-post">
                                                <span class="image avatar-small"><img src="images/avatar.jpg"
                                                                                      alt=""/></span>

                    <h1>thnonl</h1>
                    <span class="byline">Thái Hoàng Nam <br/> <i>Joined: 1/1/2014</i></span>
                </div>
            </td>
            <td>
                <div class="avatar-post">
                                                <span class="image avatar-small"><img src="images/avatar.jpg"
                                                                                      alt=""/></span>

                    <h1>thnonl</h1>
                    <span class="byline">Thái Hoàng Nam <br/> <i>Joined: 1/1/2014</i></span>
                </div>
                <div class="avatar-post">
                                                <span class="image avatar-small"><img src="images/avatar.jpg"
                                                                                      alt=""/></span>

                    <h1>thnonl</h1>
                    <span class="byline">Thái Hoàng Nam <br/> <i>Joined: 1/1/2014</i></span>
                </div>
                <div class="avatar-post">
                                                <span class="image avatar-small"><img src="images/avatar.jpg"
                                                                                      alt=""/></span>

                    <h1>thnonl</h1>
                    <span class="byline">Thái Hoàng Nam <br/> <i>Joined: 1/1/2014</i></span>
                </div>
                <div class="avatar-post">
                                                <span class="image avatar-small"><img src="images/avatar.jpg"
                                                                                      alt=""/></span>

                    <h1>thnonl</h1>
                    <span class="byline">Thái Hoàng Nam <br/> <i>Joined: 1/1/2014</i></span>
                </div>
                <div class="avatar-post">
                                                <span class="image avatar-small"><img src="images/avatar.jpg"
                                                                                      alt=""/></span>

                    <h1>thnonl</h1>
                    <span class="byline">Thái Hoàng Nam <br/> <i>Joined: 1/1/2014</i></span>
                </div>
                <div class="avatar-post">
                                                <span class="image avatar-small"><img src="images/avatar.jpg"
                                                                                      alt=""/></span>

                    <h1>thnonl</h1>
                    <span class="byline">Thái Hoàng Nam <br/> <i>Joined: 1/1/2014</i></span>
                </div>
                <div class="avatar-post">
                                                <span class="image avatar-small"><img src="images/avatar.jpg"
                                                                                      alt=""/></span>

                    <h1>thnonl</h1>
                    <span class="byline">Thái Hoàng Nam <br/> <i>Joined: 1/1/2014</i></span>
                </div>
            </td>
            <td>
                <div class="avatar-post">
                                                <span class="image avatar-small"><img src="images/avatar.jpg"
                                                                                      alt=""/></span>

                    <h1>thnonl</h1>
                    <span class="byline">Thái Hoàng Nam <br/> <i>Joined: 1/1/2014</i></span>
                </div>
                <div class="avatar-post">
                                                <span class="image avatar-small"><img src="images/avatar.jpg"
                                                                                      alt=""/></span>

                    <h1>thnonl</h1>
                    <span class="byline">Thái Hoàng Nam <br/> <i>Joined: 1/1/2014</i></span>
                </div>
                <div class="avatar-post">
                                                <span class="image avatar-small"><img src="images/avatar.jpg"
                                                                                      alt=""/></span>

                    <h1>thnonl</h1>
                    <span class="byline">Thái Hoàng Nam <br/> <i>Joined: 1/1/2014</i></span>
                </div>
                <div class="avatar-post">
                                                <span class="image avatar-small"><img src="images/avatar.jpg"
                                                                                      alt=""/></span>

                    <h1>thnonl</h1>
                    <span class="byline">Thái Hoàng Nam <br/> <i>Joined: 1/1/2014</i></span>
                </div>
                <div class="avatar-post">
                                                <span class="image avatar-small"><img src="images/avatar.jpg"
                                                                                      alt=""/></span>

                    <h1>thnonl</h1>
                    <span class="byline">Thái Hoàng Nam <br/> <i>Joined: 1/1/2014</i></span>
                </div>

                <div class="avatar-post">
                                                <span class="image avatar-small"><img src="images/avatar.jpg"
                                                                                      alt=""/></span>

                    <h1>thnonl</h1>
                    <span class="byline">Thái Hoàng Nam <br/> <i>Joined: 1/1/2014</i></span>
                </div>


            </td>
        </tr>
    </table>
</div>
<div>
    <select>
        <option>Choose group</option>
        <option>FUDN</option>
        <option>Comics</option>
    </select>

    <table class="friend">
        <tr>
            <td>
                <div class="avatar-post">
                                                <span class="image avatar-small"><img src="images/avatar.jpg"
                                                                                      alt=""/></span>

                    <h1>thnonl</h1>
                    <span class="byline">Thái Hoàng Nam <br/> <i>Joined: 1/1/2014</i></span>
                </div>
                <div class="avatar-post">
                                                <span class="image avatar-small"><img src="images/avatar.jpg"
                                                                                      alt=""/></span>

                    <h1>thnonl</h1>
                    <span class="byline">Thái Hoàng Nam <br/> <i>Joined: 1/1/2014</i></span>
                </div>
                <div class="avatar-post">
                                                <span class="image avatar-small"><img src="images/avatar.jpg"
                                                                                      alt=""/></span>

                    <h1>thnonl</h1>
                    <span class="byline">Thái Hoàng Nam <br/> <i>Joined: 1/1/2014</i></span>
                </div>
                <div class="avatar-post">
                                                <span class="image avatar-small"><img src="images/avatar.jpg"
                                                                                      alt=""/></span>

                    <h1>thnonl</h1>
                    <span class="byline">Thái Hoàng Nam <br/> <i>Joined: 1/1/2014</i></span>
                </div>
            <td>
                <div class="avatar-post">
                                                <span class="image avatar-small"><img src="images/avatar.jpg"
                                                                                      alt=""/></span>

                    <h1>thnonl</h1>
                    <span class="byline">Thái Hoàng Nam <br/> <i>Joined: 1/1/2014</i></span>
                </div>
                <div class="avatar-post">
                                                <span class="image avatar-small"><img src="images/avatar.jpg"
                                                                                      alt=""/></span>

                    <h1>thnonl</h1>
                    <span class="byline">Thái Hoàng Nam <br/> <i>Joined: 1/1/2014</i></span>
                </div>
                <div class="avatar-post">
                                                <span class="image avatar-small"><img src="images/avatar.jpg"
                                                                                      alt=""/></span>

                    <h1>thnonl</h1>
                    <span class="byline">Thái Hoàng Nam <br/> <i>Joined: 1/1/2014</i></span>
                </div>
                <div class="avatar-post">
                                                <span class="image avatar-small"><img src="images/avatar.jpg"
                                                                                      alt=""/></span>

                    <h1>thnonl</h1>
                    <span class="byline">Thái Hoàng Nam <br/> <i>Joined: 1/1/2014</i></span>
                </div>
            </td>
            <td>
                <div class="avatar-post">
                                                <span class="image avatar-small"><img src="images/avatar.jpg"
                                                                                      alt=""/></span>

                    <h1>thnonl</h1>
                    <span class="byline">Thái Hoàng Nam <br/> <i>Joined: 1/1/2014</i></span>
                </div>
                <div class="avatar-post">
                                                <span class="image avatar-small"><img src="images/avatar.jpg"
                                                                                      alt=""/></span>

                    <h1>thnonl</h1>
                    <span class="byline">Thái Hoàng Nam <br/> <i>Joined: 1/1/2014</i></span>
                </div>
                <div class="avatar-post">
                                                <span class="image avatar-small"><img src="images/avatar.jpg"
                                                                                      alt=""/></span>

                    <h1>thnonl</h1>
                    <span class="byline">Thái Hoàng Nam <br/> <i>Joined: 1/1/2014</i></span>
                </div>

            </td>
        </tr>
    </table>
</div>
<div>
    <table class="event">
        <tr>
            <td>
                <div class="event-list">
                                                <span class="image event-cover"><img src="images/post1.jpg"
                                                                                     alt=""/></span>

                    <h1>Example Event</h1>

                    <p><b>Role:</b> Holder</p>

                    <p><b>Participated at:</b> 1/1/2000</p>
                </div>
                <div class="event-list">
                                                <span class="image event-cover"><img src="images/pic01.jpg"
                                                                                     alt=""/></span>

                    <h1>Example Event</h1>

                    <p><b>Role:</b> Holder</p>

                    <p><b>Participated at:</b> 1/1/2000</p>
                </div>
                <div class="event-list">
                                                <span class="image event-cover"><img src="images/pic02.jpg"
                                                                                     alt=""/></span>

                    <h1>Example Event</h1>

                    <p><b>Role:</b> Holder</p>

                    <p><b>Participated at:</b> 1/1/2000</p>
                </div>
                <div class="event-list">
                                                <span class="image event-cover"><img src="images/pic03.jpg"
                                                                                     alt=""/></span>

                    <h1>Example Event</h1>

                    <p><b>Role:</b> Holder</p>

                    <p><b>Participated at:</b> 1/1/2000</p>
                </div>
            </td>
            <td>
                <div class="event-list">
                                                <span class="image event-cover"><img src="images/pic08.jpg"
                                                                                     alt=""/></span>

                    <h1>Example Event</h1>

                    <p><b>Role:</b> Holder</p>

                    <p><b>Participated at:</b> 1/1/2000</p>
                </div>
                <div class="event-list">
                                                <span class="image event-cover"><img src="images/pic05.jpg"
                                                                                     alt=""/></span>

                    <h1>Example Event</h1>

                    <p><b>Role:</b> Holder</p>

                    <p><b>Participated at:</b> 1/1/2000</p>
                </div>
                <div class="event-list">
                                                <span class="image event-cover"><img src="images/pic06.jpg"
                                                                                     alt=""/></span>

                    <h1>Example Event</h1>

                    <p><b>Role:</b> Holder</p>

                    <p><b>Participated at:</b> 1/1/2000</p>
                </div>
            </td>
        </tr>
    </table>
</div>
</div>
</div>
</div>
</div>
</div>

<script>
    $(document).ready(function () {
        checkOrientation("horizontal");

        var tabbedNav = $("#tabbed-nav").zozoTabs({
            orientation: "horizontal",
            position: "top-compact",
            tabWidth: 110,
            rounded: false
        });

        $("#ddl-orientation").bind("change", function (e) {
            var orientation = $(this).val();
            checkOrientation(orientation);
            tabbedNav.data('zozoTabs').setOptions({ "orientation": orientation });
        });

        $("#ddl-position").bind("change", function (e) {
            tabbedNav.data('zozoTabs').setOptions({ "position": $(this).val() });
        });

        function checkOrientation(orientation) {
            jQuery('#ddl-position').children('option[data-orientation="h"]').attr('disabled', !(orientation === "horizontal"));
        }

    });
</script>

</section>

</div>
<script src="js/classie.js"></script>

<script>
    var menuRight = document.getElementById('tdl-spmenu-s2'),
            showRight = document.getElementById('btn'),
            body = document.body;

    showRight.onclick = function () {
        classie.toggle(menuRight, 'tdl-spmenu-open');
    };

</script>

</body>
</html>